<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>心情日记</title>
        <script type="text/javascript" src="js/tools.js"></script>
        <style>
            body {
	            background:#efefef;
	            font-size: 100%;
	            font-family: Times New Roman,serif,Monospace;
	            font-weight: 900;
	            margin:  0;
	            padding: 0;


}
            #box {
                width: 700px;
                margin: 0 auto;
            }
            #headh3{
                height: 50px;
                width: 100%;
                background: #4c9ffd;
                line-height: 50px;
                color: white;
            }

            textarea {
                width: 600px;
            }

            #li {
                display: block;
                border-bottom: 1px dashed #ebebeb;
                margin: 10px 0;
                padding: 8px 0;
            }

        </style>
    </head>

    <body>
        <div id="box">
            <div id="headh3">心情日记 </div> 
            <a href="index.html"> <input type="button" value="返回主页面"  /></button></a>
           

            心情：<input type="text" id="person" value="">
            共<input style="border: 0;" name="" id="louceng">
            <textarea name="" id="text" rows="10"></textarea>
            <input type="button" value="确认发布" id="btn" />

            <h3>全部心情</h3>
            <hr/>

        </div>
        <script>
            var num = 0;
            var num1 = 0;
            var box = document.getElementById("box");
            var text = document.getElementById("text");
            var btn = document.getElementById("btn");
            var person = document.getElementById("person");
            var ul = document.createElement("ul");
            ul.id = "ul1";
            var time = document.createElement("div");
            document.getElementById("louceng").value=num+"条心情";
            btn.onclick = function() {
                //非空判断
                if(person.value==""||person.value==null){
                    alert("心情不允许为空！");
                    return false;
                }
                if(text.value==""||text.value==null){
                    alert("内容不允许为空！");
                    return false;
                }

                //获取时间
                num = num+1;
                var datetime = getTime();
                time = document.createTextNode("发布时间：" + datetime);
                var li = document.createElement("li");
                li.id = "li";

                //创建删除功能
                var oA = document.createElement("a");
                var oAtext = document.createTextNode("删除");
                oA.href = "#";
                oA.appendChild(oAtext);

                //创建发布文本框
                var fabu = document.createElement("textarea");
                fabu.rows = "10";
                fabu.style = "margin: 0px; width: 740px; height: 138px;";
                fabu.value = text.value;
                fabu.disabled="disabled";

                //创建编辑功能
                var oB = document.createElement("a");
                var oBtext = document.createTextNode("编辑");
                oB.href = "#";
                oB.appendChild(oBtext);

                //创建确认按钮
                var butt = document.createElement("input");
                butt.type = "button";
                butt.value = "确认";
                butt.style.display = "none";


                //解决兼容问题
                var ali = ul.getElementsByTagName("li");
                if(ali.length == 0) {
                    ul.appendChild(li);
                } else {
                    ul.insertBefore(li, ali[0]);
                }

                //添加节点
                box.appendChild(ul);
                var lou = document.createTextNode("第"+num+"条心情");
                var persons = document.createTextNode("心情："+ person.value);
                document.getElementById("person").value="";
                var textnode = document.createTextNode("发布内容：");
                document.getElementById("text").value="";
                li.appendChild(lou);
                li.appendChild(document.createElement("br"));
                li.appendChild(persons);
                li.appendChild(document.createElement("br"));
                li.appendChild(textnode);
                li.appendChild(document.createElement("br"));
                li.appendChild(fabu);
                li.appendChild(time);
                li.appendChild(oA);
                li.appendChild(oB);
                li.appendChild(butt);

                //删除
                oA.onclick = function() {
                    ul.removeChild(this.parentNode);
                    //删除时更新
                    num1++;//删除次数
                    document.getElementById("louceng").value=num-num1+"条心情";
                };

                //编辑
                oB.onclick = function() {
                    fabu.disabled = "";
                    butt.style.display = "block";
                }

                //确认更改
                butt.onclick = function() {
                    fabu.disabled="disabled";
                    butt.style.display = "none";
                }

                //楼层展示
                document.getElementById("louceng").value=num-num1+"条心情";
            }
        </script>
    </body>

</html>